<template>
  <div>
    <div class="head">
      <div class="imgs"  @click="toLogin">
        <img v-if="isLogin" :src="avatarUrl" alt="">
      </div>
      <div class="text"  @click="toLogin">
        <span class="name" v-if="isLogin">{{ nickName }}
          <span style="margin-left: 15px">| {{ welcome }}</span>
        </span>
        <span class="tips"  v-else>您还未登录,请登录</span>
      </div>
    </div>
    <div>
      <u-cell-group>
        <u-cell-item @click="onTap" icon-size="45" icon="account-fill" title="个人信息"></u-cell-item>
        <u-cell-item icon-size="45" icon="order" title="活动日志"></u-cell-item>
        <u-cell-item icon-size="45" icon="eye" title="被看护人管理"></u-cell-item>
        <u-cell-item icon-size="45" icon="volume-up" title="报警人管理"></u-cell-item>
        <u-cell-item icon-size="45" icon="kefu-ermai" title="联系我们" value="0512-181818"></u-cell-item>
        <u-cell-item icon-size="45" icon="question-circle" title="关于我们"></u-cell-item>
      </u-cell-group>
    </div>

    <view>
      <u-modal
          v-model="show"
          content="你还未登录，请先登录"
          show-cancel-button="true"
          confirm-text="去登录"
          @confirm="onConfirm">
      </u-modal>
    </view>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      title: '素胚勾勒出青花，笔锋浓转淡',
      isLogin: false,
      welcome: '上午好！',
      greet: {
        morning: '早上好！',
        forenoon: '上午好!',
        noon: '中午好!',
        afternoon: '下午好~',
        night: '晚上好~',
      },
      show: false,
      agree: false,
      agreeCount: 0,
      nickName:'',
      code:'',
      avatarUrl:'',

    }
  },
  onLoad: function() {
    let isLogin = uni.getStorageSync('isLogin')
    this.isLogin = isLogin
    if (!isLogin) {
      if (!this.agree&&this.agreeCount===0){
        this.agreeCount = 1
        this.getUserProfile()
      }
    }
  },
  onShow() {

    let isLogin = uni.getStorageSync('isLogin')
    this.isLogin = isLogin
    if (isLogin) {
      this.welcome = this.getTimeOfWord()
      this.avatarUrl = uni.getStorageSync('avatarUrl')
      this.nickName = uni.getStorageSync('nickName')
    }else {
      let avatarUrl =  uni.getStorageSync('avatarUrl')
      console.log('avatarUrl',avatarUrl)
      if (!avatarUrl){
        this.agree = false
        this.agreeCount = 0
      }

    }
  },
  methods: {
    getUserProfile(){
      //获取用户头像，昵称
      let self = this
      uni.showModal({
        title: '温馨提示',
        content: '需要获取您的微信授权',
        success(res) {
          console.log(res)
          //如果用户点击了确定按钮
          if (res.confirm) {
            uni.getUserProfile({
              desc: '获取你的昵称、头像、地区及性别',
              success: res => {
                self.avatarUrl = res.userInfo.avatarUrl
                self.nickName = res.userInfo.nickName
                uni.setStorageSync('avatarUrl',res.userInfo.avatarUrl);
                uni.setStorageSync('nickName', res.userInfo.nickName);
                self.agree = true
              },
              fail: res => {
                //拒绝授权
                uni.showToast({
                  title: '您拒绝了请求',
                  icon: 'error',
                  duration: 2000
                });
              }
            });
          } else if (res.cancel) {
            //如果用户点击了取消按钮
            uni.showToast({
              title: '您拒绝了请求',
              icon: 'error',
              duration: 2000
            });

          }
        }
      });
    },
    getTimeOfWord() {
      let time = new Date().getHours()
      let str = ''
      if (time > 0 && time < 9) {
        str = 'morning'
      }
      if (time > 9 && time < 12) {
        str = 'forenoon'
      }
      if (time == 12) {
        str = 'noon'
      }
      if (time > 12 && time < 19) {
        str = 'afternoon'
      }
      if (time > 19 && time <= 24) {
        str = 'night'
      }
      return this.greet[str]
    },
    onTap() {
      if (!this.isLogin) {
        this.show = true
        return
      }
      uni.navigateTo({
        url: '/pages/personal/info'
      })
    },
    onConfirm() {
      if (!this.agree){
        let self = this
        uni.getUserProfile({
          desc: '获取你的昵称、头像、地区及性别',
          success: res => {
            // console.log(res);
            self.avatarUrl = res.userInfo.avatarUrl
            self.nickName = res.userInfo.nickName
            uni.setStorageSync('avatarUrl',res.userInfo.avatarUrl);
            uni.setStorageSync('nickName', res.userInfo.nickName);
            self.agree = true
            uni.navigateTo({
              url: '/pages/login/index'
            })
          },
          fail: res => {
            //拒绝授权
            uni.showToast({
              title: '您拒绝了请求',
              icon: 'error',
              duration: 2000
            });

          }
        });
      }else {
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }



      // uni.switchTab({
      //   url: '/pages/login/index'
      // })


    },
    toLogin(){
      let self = this
      if (!this.isLogin) {
        if (!this.agree&&this.agreeCount===0){
          uni.getUserProfile({
            desc: '获取你的昵称、头像、地区及性别',
            success: res => {
              // console.log(res);
              self.avatarUrl = res.userInfo.avatarUrl
              self.nickName = res.userInfo.nickName
              uni.setStorageSync('avatarUrl',res.userInfo.avatarUrl);
              uni.setStorageSync('nickName', res.userInfo.nickName);
              self.agree = true
              uni.navigateTo({
                url: '/pages/login/index'
              })
            },
            fail: res => {
              //拒绝授权
              uni.showToast({
                title: '您拒绝了请求',
                icon: 'error',
                duration: 2000
              });

            }
          });
        }else {
          uni.navigateTo({
            url: '/pages/login/index'
          })
        }

      }else {
        uni.navigateTo({
          url: '/pages/personal/info'
        })
      }

    }
  }
}
</script>

<style scoped>
.head {
  width: 100%;
  height: 140px;
  background: linear-gradient(224deg, #57B3FA 0%, #2C7CF2 100%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.imgs {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgb(216, 231, 231);
  margin-left: 50px;
  overflow: hidden;
}
.imgs img{
  width: 60px;
  height: 60px;
}

.text {
  /*width: 100px;*/
  height: 50px;
  line-height: 50px;
  color: #fff;
  /*background-color: #4cd964;*/
  margin-left: 20px;
  font-size: 16px;
}

.tips {
  font-size: 16px;
}

.name {
  font-size: 16px;
}


</style>